import React, { useEffect } from "react";
import * as echarts from "echarts";

export default function ABout() {
  // useEffect可以理解为生命周期函数。
  // 第一个参数为函数：如果第二个参数是空或空数组，则回调函数就是组件挂载执行；如果不是空数组，则数组中对应变量更新时也会执行。
  // 第二个参数为数组，可以使某些数据更新时也执行。
  // 如果第一个参数返回一个函数，则这个函数在组件卸载前执行
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    const option = {
      // ... ECharts 配置项
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    return () => {
      // 在组件卸载前执行,可以做一些清除定时器等操作。
    };
  }, []);
  return <div id="main" style={{ width: 500, height: 500 }}></div>;
}
